<template>
  <div>
    <!-- 自定义指定:
      需求：实现v-text的指定(v-xxx)
      用法：
         定义自定义指令
             全局定义
                Vue.directive('指令名',{指令的生命周期})
             局部定义
                directives:{
                    指令名:指令的生命周期
                    bind:绑定时，类似于beforeMount
                    inserted:添加到父节点时执行，类似于mounted
                    update:更新时(指令所在组件有更新)，不保证更新完成了
                    componentUpdated:更新完成时,类似 updated,指令所在组件包括子组件都更新完成了
                    unbind:解绑（组件销毁，或者指令标签销毁了）时，类似于destroyed

                    inserted与componentUpdated
                }
           v-指令名:属性名.修饰符="值"
           v-on:keyup.enter="fn"

-->
    <h3 v-text="msg"></h3>
    <button @click="setMsg">修改msg</button>
    <div v-xxx="msg">123</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  directives: {
    xxx: {
      inserted (dom, obj, vnode) {
        // dom:指令所在dom
        // obj:指令身上的配制信息
        // vnode:指令的虚拟dom节点信息 vnode.context:指令所在组件的实例(this)
        console.log(dom, obj, vnode)
        console.log(vnode.context.msg)
        dom.innerText = obj.value
      },
      componentUpdated (dom, obj, vnode) {
        dom.innerText = obj.value
      }
    }
  },
  methods: {
    setMsg () {
      this.msg = Date.now() + ''
    }
  }
}
</script>
<style></style>
